<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-按钮组件</title>
    <!--Vue必须放上面-->
    <script src="../js/vue.js"></script>
    <!--ElementUi-->
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <!--
            按钮组件: el-button    行级组件
        -->
        <!--以前的按钮VS现在的按钮-->
        <button>添加</button>
        <hr>
        <!--
            没有加图标的按钮
             样式属性：type
                - success : 绿色背景
                - danger :  红色背景
                - warning : 黄色背景
                - info : 灰色背景
                - primary : 蓝色背景
        -->
        <el-button>添加</el-button>
        <el-button type="success">添加</el-button>
        <el-button type="danger">删除</el-button>
        <el-button type="warning">修改</el-button>
        <el-button type="info">搜索</el-button>
        <el-button type="primary">确定</el-button>
        <el-button type="danger">取消</el-button>
        <hr>
        <!--
           按钮加上对应的图标
              按钮中加图标： icon属性
                   el-icon-plus    : 添加
                   el-icon-delete  : 删除
                   el-icon-edit    : 编辑
                   el-icon-search  : 搜索
                   el-icon-check   : 确定
                   el-icon-close   : 取消
        -->
        <el-button icon="el-icon-plus">添加</el-button>
        <el-button icon="el-icon-plus" type="success">添加</el-button>
        <el-button icon="el-icon-delete" type="danger">删除</el-button>
        <el-button icon="el-icon-edit" type="warning">修改</el-button>
        <el-button icon="el-icon-search" type="info">搜索</el-button>
        <el-button icon="el-icon-check" type="primary">确定</el-button>
        <el-button icon="el-icon-close" type="danger">取消</el-button>
        <hr>
        <!--
            设置图标的尺寸大小：size属性
                size 不赋值： 最大
                size="medium" 第二大
                size="small" 小
                size="mini" 最小
        -->
        <el-button icon="el-icon-plus" type="success">添加</el-button>
        <el-button icon="el-icon-delete" type="danger" size="medium">删除</el-button>
        <el-button icon="el-icon-edit" type="warning" size="small">修改</el-button>
        <el-button icon="el-icon-search" type="info" size="mini">搜索</el-button>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        });
    </script>
</body>
</html>